
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>项目案例三级页-1</title>
		<link href="css/base.css" rel="stylesheet" />
		<link href="css/home.css" rel="stylesheet" />
		<link  href="images/favicon.png" rel="icon"/>
		<script type="text/javascript">
			function showImg() {
				document.getElementById("wxImg").style.display = 'block';
			}

			function hideImg() {
				docpmument.getElementById("wxImg").style.display = 'none';
			}
		</script>
		<style>
			#news_active{
				border-bottom: 2px solid white;
				margin-bottom: 20px;
			}
		</style>
	</head>
	<body>
		<div class="news_designPrinciples">
			<div class="banner">
				<div class="news_designPrinciples_nav">
					<h1> 这7个实用规则，能让你的设计更加简单直观</h1>
					<div class="nav">
						<div class="logo fl">
							<a href="index.html">
								<img src="images/diansheLOGO.png" />
							</a>
						</div>
						<div class="tell fr">
							<a href="#">
								<img src="images/phone.png" />
							</a>
						</div>
						<ul class="fr">
							<li>
								<a href="project.html">案例</a>
							</li>
							<li>
								<a href="service.html">服务</a>
							</li>
							<li>
								<a href="about.html">关于</a>
							</li>
							<li id="news_active">
								<a href="news.html">研究</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<!--返回列表开始-->
			<div class="news_con_top">
		      <div class="con">
					<strong>视觉设计&nbsp; &nbsp;2017-05-08 </strong>
					<span>分享文章到：
					  <img src="images/news_principles_weibo_icon.png"/>
					  <img src="images/news_principles_weixin_icon.png"/>
					</span>
			        <a href="news.html" class="more">&lt;返回列表</a>
		      </div>
	        </div>
	        <!--设计原则内容部分-->
	        <div class="news_designPrinciples_ctn">
	        	<div class="txt">
	        		<p>还记得KISS原则么？KISS 是 Keep it Simple and Stupid 的缩写，指的是要将产品做的连白痴都会用，
	        			因此也常常被称为懒人原则。这一设计原则最初在1960年被提出并应用于美国海军的相关设计。在此后
	        			的50多年当中，设计在技术和思路上经历了翻天覆地的变化，但是KISS原则依然非常重要，并且影响巨大。</p>
	        		<p>绝大多数的平面设计师在刚刚开始接触设计的时候，或多或少都接触过KISS原则，但是在具体实施的时候，却常常不知要如何实施。想要创造一个足够简单的设计，可能比你想象的要复杂一些。那么今天接下来要说的7个规则，能够帮你在杂乱的思路里面，理出一条通路。</p>
	        	</div>
	        	<ul>
	        		<li>
	        			<h3>1、一个页面，一个目标</h3>
	        			<img src="images/news_designPrinciples_img01.jpg" />
	        			<p>想要设计一个简单直观的网站，那么你应该为每个页面设定一个目标。每个页面最终是要引领用户进行某一个操作，从导航到页脚都要围绕这一个目标来设计。</p>
	        			<p>可以是点击一个链接，也可以是在表单中输入信息，还可以是查看视频或者进入一个游戏。但是不论是哪种，都应该关注单个用户在这个页面中的转化率。</p>
	        			<p>分散用户注意力的东西太多了，他们可能因为这些干扰而打断了原本正准备进行的操作。所以，你要做一个目的性明确的设计，集中精力来引导用户。每个按钮上下的设计元素，包括滚动的效果本身，都尽量将用户导向按钮、链接等。这种目标上的一致性能够很好的帮助用户了解他们需要在网站上做什么，简单的选择往往能够让用户更轻松参与进来。</p>
	        		</li>
	        		
	        		<li>
	        			<h3>2、坚持使用一两个字体族</h3>
	        			<img src="images/news_designPrinciples_images02.jpg" />
	        			<p>有许多设计规范会推荐用户在一个设计项目中使用三个甚至更多的字体。不过，将使用的字体缩减到2个字体族当中，会让整个设计的凝聚力更强。</p>
	        			<p>许多字体族当中，不同的字重能够创造足够的视觉对比度。许多字体族当中甚至包含了多种不同样式的字体，其中有些可选的字体形式感十足，甚至非常适合用来做尺寸超大的标题。</p>
	        			<p>所以，你的主要工作是挑选适合正文用的字体以及用作展示的字体，选择两套能够相互搭配的字体族，那么你整套设计可用的字体搭配应该都可以搞定了。</p>
	        			<p>接下来你会发现，这样的字体搭配能够让你的整个排版和视觉层次更易于管理控制。</p>
	        		</li>
	        		
	        		<li>
	        			<h3>3、使用一致的对齐方式</h3>
	        			<img src="images/news_designPrinciples_images03.jpg" />
	        			<p>左对齐，居中，还是靠右对齐，无论你是喜欢哪种，尽量在整个设计当中贯彻这种方式。这种对齐方式的选取不仅仅是文本本身的对齐，还包含了各种其他元素的对齐方式。</p>
	        			<p>Adaptable 的网站在这个事情上就做的很好。尽管轮播图中的图片和文本的内容各不相同，但是几乎都采用了统一的左对齐，文本和行为召唤按钮也是做对齐，元素与元素之间的间距也很统一，这种一致的美感让人非常舒适。</p>
	        			<p>左对齐和居中对齐是最常见的两种对齐的方式，因为这两种是可读性最强的排版方式。而在针对较长的文本进行排版的时候，左对齐是首选选项。</p>
	        		</li>
	        		<li>
	        			<h3>4、建立层次</h3>
	        			<img src="images/news_designPrinciples_images04.jpg" />
	        			<p>用户不应该在查看你的网页的过程中费脑子思考。所以，即使是最简单的视觉排版，都应该具备足够清晰的层次。</p>
	        			<p>你的设计应该从主视觉开始。它可以是一个图像，也可以是一个视频，同样可以是一段文本，但不论是哪种，它都应该是给予用户第一印象的元素。</p>
	        			<p>接下来，通常需要有一些文字内容，告知用户这个设计或者这个网站是干啥的，通常，它会以标题的形式和主视觉搭配起来，一同传递信息给用户。</p>
	        		    <p>随后可以增加一些说明性的副标题。此外，还应该提供导航等元素，因为基于用户的浏览习惯，他们会期望看到这些内容，并且已经具备了与之相关的浏览习惯。所以，通过这样层次化的设计，可以让用户更便捷地获取信息。</p>
	        		</li>
	        		<li>
	        			<h3>5、运用空间与留白</h3>
	        			<img src="images/news_designPrinciples_images05.jpg" />
	        			<p>不要纠结于留白太多，留白其实是服务于各种设计元素的，它会让你的设计更好。</p>
	        			<p>如果你想要设计真正简单直观的设计，留白是必不可少的组成部分。给每个元素足够的空间，有空间的衬托，才能让这些元素被访客注意到，因此，千万不要让整个布局杂乱不堪，而应该创造有视觉焦点的布局。</p>
	        			<p>使用空间窍门在于一致性的把控。为每个元素周围的留白、文本的字间距、行间距都设定好，然后尽可能保持规则性。如果这样设计出来的效果看起来不自然，也许你只需要对留白稍加调整就可以了。当你打开自己的设计，视觉自然聚焦到你想要用户看的地方的时候，你就会知道你的留白和空间设计是争取的。</p>
	        		</li>
	        		<li>
	        			<h3>6、强化对比度</h3>
	        			<img src="images/news_designPrinciples_images06.jpg" />
	        			<p>从色彩到尺寸大小，具有高对比度的设计元素能够让整个项目的设计感和精细度得到提升，哪怕是在极简的设计框架之下。</p>
	        			<p>明亮而又富有对比度的配色是许多跟随流行的项目所青睐的选择，因为这样更容易吸引用户的注意力。大胆的配色让一个简单的设计显得更加富有设计感，也更加有趣。为了充分的利用色彩的对比度，尽量选择色轮上相对位置的色彩搭配，并且调整色彩饱和度到合适的状态。也许你会在其中寻找到意想不到的搭配。</p>
	        			
	        		</li>
	        		<li>
	        			<h3>7.使用一致的元素和目标</h3>
	        			<img src="images/news_designPrinciples_images07.jpg" />
	        			<p>设计的一致性是最基本的设计规则，也是最容易被忽略的设计规则，与此同时，它也是许多优秀的设计的秘密所在。有太多的网站采用不匹配的设计元素，导致整个设计陷入尴尬。</p>
	        			<p>明亮而又富有对比度的配色是许多跟随流行的项目所青睐的选择，因为这样更容易吸引用户的注意力。大胆的配色让一个简单的设计显得更加富有设计感，也更加有趣。为了充分的利用色彩的对比度，尽量选择色轮上相对位置的色彩搭配，并且调整色彩饱和度到合适的状态。也许你会在其中寻找到意想不到的搭配。</p>
	        		</li>
	        		<li>
	        			<h3>结语</h3>
	        			<p>简单直观的设计并不一定非得是极简的，它同样可以是丰富而又有趣的。但是简单而易用的页面的设计过程是需要用心做才能达成的，它需要具备高度的可用性和直观的设计，确保用户在使用的时候足够直觉、不会迟疑。</p>
	        		</li>
	        		<li>
	        			<p>转载来自:<span>优设</span></p>
	        			<p>本文地址：http://www.set point.cn/html/blogs/view-45.html</p>
	        		</li>
	        		<li>
	        			<h3>关于set point点设设计</h3>
	        			<p>set point点设设计是领先的用户体验设计与互联网品牌建设公司,为众多企业创造了专业与创新的设计解决方案,提供交互设计、UI界面设计、网站设计开发、网站建设、移动界面设计、软件界面设计、互联网品牌建设和用户体验咨询服务</p>
	        		    <p style="color: #551a8b;"><span> 查看精选案例</span> |  set point服务体系 | 了解set point动态 </p>
	        		</li>
	        	</ul>
	        	
	        </div>
	        
	        <div class="erweima">
	        	<img src="images/news_shejiyuanze_erweima.jpg" />
	        	<p>微信公众号：set point点设设计</p>
	        	<p>www.set point.cn</p>
	        	<p>专注用户体验设计和互联网品牌建设</p>
	        </div>
	        
	      <!--  底部开始-->
	      
	      <div class="main_foot">
				<div class="foot clearfix">
					<div class="foot_logo fl">
						<a href="index.html"><img src="images/diansheLOGO.png" /></a>
						<p>设计和技术创造极致用户体验</p>
					</div>
					<div class="con fl">
						<ul class="list1">
							<h3>我们</h3>
							<li>
								<a href="#"	>服务项目</a>					
							</li>
							<li>
								<a href="#"	>关于我们</a>					
							</li>
							<li>
								<a href="#"	>新闻动态</a>					
							</li>
							<li>
								<a href="#"	>加入我们</a>					
							</li>
							<li>
								<a href="#"	>联系我们</a>					
							</li>
						</ul>
						<ul class="list1">
							<h3>案例</h3>
							<li>
								<a href="project.html"	>全部</a>					
							</li>
							<li>
								<a href="#"	>网站</a>					
							</li>
							<li>
								<a href="#"	>移动app</a>					
							</li>
							<li>
								<a href="#"	>桌面软件</a>					
							</li>
							<li>
								<a href="#"	>品牌及平面</a>					
							</li>
						</ul>
						<ul class="list1">
							<h3>方案</h3>
							<li>
								<a href="#"	>移动互联网</a>					
							</li>
							<li>
								<a href="#"	>在线金融</a>					
							</li>
							<li>
								<a href="#"	>传统企业转型</a>					
							</li>
							<li>
								<a href="#"	>医疗健康</a>					
							</li>
							<li>
								<a href="#"	>创业服务</a>					
							</li>
						</ul>
						<ul class="list1">
							<h3>发现</h3>
							<li>
								<a href="#"	>合作伙伴</a>					
							</li>
							<li>
								<a href="#"	>研究</a>					
							</li>
							<li>
								<a href="#"	>set point实验室</a>					
							</li>
							<li>
								<a href="#"	>留言板</a>					
							</li>
							<li>
								<a href="#"	>友情链接</a>					
							</li>
						</ul>
					</div>
					<ul class="list2 fl">
						<h3>商务合作</h3>
						<li>
							<a href="#"	>邮箱：hello@set point.cn</a>					
						</li>
						<li>
							<a href="#"	>手机：18813146300</a>					
						</li>
						<li>
							<a href="#"	>座机：（+86）010-57281080</a>					
						</li>
						<li>
							<a href="http://wpa.qq.com/msgrd?v=3&uin=643879871&site=qq&menu=yes"	>Q&nbsp;Q：94967751<img src="images/icon_10.jpg" />点击交谈</a>					
						</li>
						<li>
							<a href="#"	>地址：安徽合肥马鞍山路与南一环交叉口</a>					
						</li>
					</ul>
				</div>
				<li class="foot_bottom">
					<ul class="code">
					<li>
						<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()"><img src="images/icon_05.png" /></a>
						<div id="wxImg"><img src="images/erweima.jpg" /></div>
					</li>
					<li>
						<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()"><img src="images/icon_06.png" /></a>
						<div id="wxImg"><img src="images/erweima.jpg" /></div>
					</li>
					<li>
						<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()"><img src="images/icon_07.png" /></a>
						<div id="wxImg"><img src="images/erweima.jpg" /></div>
					</li>
					<li>
						<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()"><img src="images/icon_08.png" /></a>
						<div id="wxImg"><img src="images/erweima.jpg" /></div>
					</li>
					<li>
						<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()"><img src="images/icon_09.png" /></a>
						<div id="wxImg"><img src="images/erweima.jpg" /></div>
					</li>
					</ul>
					<p>Copyright © 2014-2017 nicedesign 京ICP备15000202号-5</p>
				</div>
				
				<!--网页返回顶部-->
			<div class="back_top">
				<a href="#">
					<img src="images/top2.png" />
				</a>
			</div>
			<div class="messeage">
				<a href="http://wpa.qq.com/msgrd?v=3&uin=643879871&site=qq&menu=yes">
					<img src="images/Online.gif" />
				</a>
			</div>
			
		</div>
	</body>
</html>
